<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>竞猜大师 - 手机版</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航 -->
        <header class="app-header">
            <h1><i class="fas fa-trophy"></i> 竞猜大师</h1>
            <button class="menu-toggle" id="menuToggle">
                <i class="fas fa-bars"></i>
            </button>
        </header>

        <!-- 侧边菜单 -->
        <div class="side-menu" id="sideMenu">
            <div class="menu-header">
                <h2>菜单</h2>
                <button class="close-menu" id="closeMenu">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="menu-items">
                <a href="#" class="menu-item active" data-tab="home">
                    <i class="fas fa-home"></i> 首页
                </a>
                <a href="#" class="menu-item" data-tab="create">
                    <i class="fas fa-plus"></i> 创建竞猜
                </a>
                <a href="#" class="menu-item" data-tab="bet">
                    <i class="fas fa-coins"></i> 参与竞猜
                </a>
                <a href="#" class="menu-item" data-tab="results">
                    <i class="fas fa-chart-line"></i> 查看结果
                </a>
                <a href="#" class="menu-item" data-tab="help">
                    <i class="fas fa-question-circle"></i> 使用帮助
                </a>
            </div>
        </div>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 首页 -->
            <div class="content-tab active" id="home-tab">
                <div class="welcome-card">
                    <h2>欢迎使用竞猜大师</h2>
                    <p>创建竞猜，邀请好友参与，体验竞猜乐趣！</p>
                </div>

                <div class="featured-contests">
                    <h3>热门竞猜</h3>
                    <div class="contest-list">
                        <div class="contest-item">
                            <div class="contest-title">世界杯决赛</div>
                            <div class="contest-players">
                                <span class="player">巴西队</span>
                                <span class="vs">VS</span>
                                <span class="player">德国队</span>
                            </div>
                            <div class="contest-status status-active">进行中</div>
                            <button class="btn-small">参与</button>
                        </div>

                        <div class="contest-item">
                            <div class="contest-title">NBA总决赛</div>
                            <div class="contest-players">
                                <span class="player">湖人队</span>
                                <span class="vs">VS</span>
                                <span class="player">勇士队</span>
                            </div>
                            <div class="contest-status status-active">进行中</div>
                            <button class="btn-small">参与</button>
                        </div>
                    </div>
                </div>

                <div class="quick-actions">
                    <h3>快速操作</h3>
                    <div class="action-buttons">
                        <button class="action-btn" data-tab="create">
                            <i class="fas fa-plus"></i>
                            <span>创建竞猜</span>
                        </button>
                        <button class="action-btn" data-tab="bet">
                            <i class="fas fa-coins"></i>
                            <span>参与竞猜</span>
                        </button>
                        <button class="action-btn" data-tab="results">
                            <i class="fas fa-chart-line"></i>
                            <span>查看结果</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 创建竞猜 -->
            <div class="content-tab" id="create-tab">
                <div class="form-card">
                    <h2><i class="fas fa-plus-circle"></i> 创建新竞猜</h2>
                    
                    <div class="form-group">
                        <label for="contest-name">竞猜名称</label>
                        <input type="text" id="contest-name" placeholder="例如：世界杯决赛">
                    </div>
                    
                    <div class="form-group">
                        <label for="player-a">选手A名称</label>
                        <input type="text" id="player-a" placeholder="例如：巴西队">
                    </div>
                    
                    <div class="form-group">
                        <label for="player-b">选手B名称</label>
                        <input type="text" id="player-b" placeholder="例如：德国队">
                    </div>
                    
                    <button class="btn-primary" id="create-contest">
                        <i class="fas fa-rocket"></i> 发布竞猜
                    </button>
                </div>

                <div class="share-section" id="share-section" style="display: none;">
                    <h3>分享竞猜</h3>
                    <div class="share-link">
                        <input type="text" id="contest-link" readonly>
                        <button class="btn-copy" id="copy-link">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <p class="share-hint">复制链接发送给好友，邀请他们参与竞猜</p>
                </div>
            </div>

            <!-- 参与竞猜 -->
            <div class="content-tab" id="bet-tab">
                <div class="form-card">
                    <h2><i class="fas fa-vote-yea"></i> 参与竞猜</h2>
                    
                    <div class="form-group">
                        <label for="contest-link-input">竞猜链接</label>
                        <input type="text" id="contest-link-input" placeholder="请输入竞猜链接">
                    </div>
                    
                    <button class="btn-secondary" id="load-contest">
                        <i class="fas fa-search"></i> 加载竞猜
                    </button>

                    <div class="contest-details" id="contest-details" style="display: none;">
                        <h3 id="contest-detail-name">世界杯决赛</h3>
                        
                        <div class="form-group">
                            <label for="player-name">您的昵称</label>
                            <input type="text" id="player-name" placeholder="请输入您的昵称">
                        </div>
                        
                        <div class="player-selection">
                            <label>选择获胜选手</label>
                            <div class="player-options">
                                <div class="player-option selected" data-player="A">
                                    <i class="fas fa-user"></i>
                                    <span id="player-a-name">巴西队</span>
                                </div>
                                <div class="player-option" data-player="B">
                                    <i class="fas fa-user"></i>
                                    <span id="player-b-name">德国队</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="bet-points">投注积分</label>
                            <input type="number" id="bet-points" placeholder="请输入正整数积分" min="1">
                        </div>
                        
                        <button class="btn-primary" id="place-bet">
                            <i class="fas fa-check-circle"></i> 确认投注
                        </button>
                    </div>
                </div>
            </div>

            <!-- 查看结果 -->
            <div class="content-tab" id="results-tab">
                <div class="form-card">
                    <h2><i class="fas fa-chart-line"></i> 查看竞猜结果</h2>
                    
                    <div class="form-group">
                        <label for="result-link-input">竞猜链接</label>
                        <input type="text" id="result-link-input" placeholder="请输入竞猜链接">
                    </div>
                    
                    <button class="btn-secondary" id="load-results">
                        <i class="fas fa-search"></i> 加载结果
                    </button>

                    <div class="results-container" id="results-container" style="display: none;">
                        <h3 id="result-contest-name">世界杯决赛</h3>
                        <div class="result-winner">
                            获胜方: <span id="result-winner-name">巴西队</span>
                        </div>
                        
                        <h4>投注结果</h4>
                        <div class="result-list">
                            <div class="result-item">
                                <span class="player-name">玩家A</span>
                                <span class="points-change positive">+85积分</span>
                            </div>
                            <div class="result-item">
                                <span class="player-name">玩家B</span>
                                <span class="points-change negative">-100积分</span>
                            </div>
                            <div class="result-item">
                                <span class="player-name">玩家C</span>
                                <span class="points-change negative">-50积分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 使用帮助 -->
            <div class="content-tab" id="help-tab">
                <div class="help-card">
                    <h2><i class="fas fa-question-circle"></i> 使用帮助</h2>
                    
                    <div class="help-section">
                        <h3>如何创建竞猜</h3>
                        <ol>
                            <li>点击"创建竞猜"标签</li>
                            <li>填写竞猜名称和选手名称</li>
                            <li>点击"发布竞猜"按钮</li>
                            <li>复制生成的链接分享给好友</li>
                        </ol>
                    </div>
                    
                    <div class="help-section">
                        <h3>如何参与竞猜</h3>
                        <ol>
                            <li>点击"参与竞猜"标签</li>
                            <li>输入竞猜链接并加载</li>
                            <li>填写昵称并选择支持的选手</li>
                            <li>输入投注积分并确认</li>
                        </ol>
                    </div>
                    
                    <div class="help-section">
                        <h3>积分规则</h3>
                        <ul>
                            <li>投注积分必须为正整数</li>
                            <li>获胜方按投注比例分配积分</li>
                            <li>结果计算四舍五入到整数</li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>

        <!-- 底部通知 -->
        <div class="toast" id="toast"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>